<template>
  <div class="searchTop">
    <div class="searchInp">
      <img
              class="search-img"
              src="https://cdn.tuanhaoke.cn/assets/images/ic_home_search_search.png">
      <input
              type="text"
              :placeholder="placeHolder"
              class="search-inp"
              v-model="value">
      <img
              class="search-del"
              v-if="value"
              @click="clearSearchVal"
              src="https://cdn.tuanhaoke.cn/assets/images/ic_home_search_close.png">
    </div>
    <span
            class="searchText"
            @click="getSearchVal">搜索</span>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        searchVal: '',
      };
    },
    props: {
      value: {
        type: String,
        default: '',
      },
      placeHolder: {
        type: String,
        default: '请输入搜索关键词',
      },
    },
    created() {
      this.searchVal = this.defaultSearchVal || ''
    },
    methods: {
      clearSearchVal() {
        this.value = ''
      },
      getSearchVal() {
        if (!this.value) {
          wx.showToast({
            title: '请输入搜索关键字',
            icon: 'none',
            duration: 2000,
          })
          return
        }
        this.$emit('input', this.value)
        this.$emit('change', this.value)
      },
      network() {
        return {
          example: async () => {
            console.log('network');
          },
        };
      },
      handler() {
        return {
          example: () => {
            console.log('handle');
          },
        };
      },
    },
  };
</script>

<style lang="scss" scoped>
  .searchTop{
    height: 104rpx;
    min-height: 104r[x];
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    box-sizing: border-box;
    justify-content: space-between;
    background-color: #fff;
    border-top: 1rpx solid #E5E5E5;
    // box-shadow:0px 1px 0px 0px rgba(229,229,229,1);
    .searchInp{
      flex: 1;
      height: 64rpx;
      border-radius: 34rpx;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      padding:0 26rpx;
      margin-right: 30rpx;
      .search-img{
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
      }
      .search-inp{
        flex: 1;
        background: none;
      }
      .search-del{
        width: 40rpx;
        height: 40rpx;
        opacity: 0.8;
        border-radius: 100%;
      }
    }
    .searchText{
      color:#141414;
      font-size: 28rpx;
    }
  }
</style>
